<template>
  <div class="tenant-billing">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>租户账单</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="账单生成" name="billingGeneration">
            <div class="billing-generation-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>账单生成设置</span>
                  </div>
                </template>
                <el-form :model="billingForm" label-width="120px">
                  <el-form-item label="生成周期">
                    <el-select v-model="billingForm.cycle" placeholder="请选择生成周期">
                      <el-option label="每月" value="monthly" />
                      <el-option label="每季度" value="quarterly" />
                      <el-option label="每年" value="yearly" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="生成时间">
                    <el-date-picker
                      v-model="billingForm.generateTime"
                      type="datetime"
                      placeholder="选择生成时间"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                  <el-form-item label="账单范围">
                    <el-date-picker
                      v-model="billingForm.range"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="YYYY-MM-DD"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="generateBilling">生成账单</el-button>
                    <el-button @click="previewBilling">预览账单</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>最近生成记录</span>
                  </div>
                </template>
                <el-table :data="billingRecords" style="width: 100%">
                  <el-table-column prop="period" label="账单周期" width="180" />
                  <el-table-column prop="generateTime" label="生成时间" width="180" />
                  <el-table-column prop="tenantCount" label="租户数量" width="100" />
                  <el-table-column prop="totalAmount" label="总金额" width="120" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getBillingStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
                      <el-button size="small" @click="downloadBilling(scope.row)">下载</el-button>
                      <el-button size="small" type="danger" @click="deleteBilling(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="费用统计" name="costStatistics">
            <div class="cost-statistics-section">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">¥{{ costStats.totalAmount }}</div>
                      <div class="stat-label">总费用</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ costStats.tenantCount }}</div>
                      <div class="stat-label">租户数量</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">¥{{ costStats.avgAmount }}</div>
                      <div class="stat-label">平均费用</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ costStats.growthRate }}%</div>
                      <div class="stat-label">增长率</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>费用趋势</span>
                  </div>
                </template>
                <div ref="chartRef" style="width: 100%; height: 400px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="欠费管理" name="arrearsManagement">
            <div class="arrears-management-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>欠费租户列表</span>
                  </div>
                </template>
                <el-table :data="arrearsTenants" style="width: 100%">
                  <el-table-column prop="tenantName" label="租户名称" width="200" />
                  <el-table-column prop="contact" label="联系人" width="120" />
                  <el-table-column prop="phone" label="联系电话" width="150" />
                  <el-table-column prop="arrearsAmount" label="欠费金额" width="120" />
                  <el-table-column prop="arrearsDays" label="欠费天数" width="100" />
                  <el-table-column prop="lastPayment" label="最后付款" width="180" />
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="sendReminder(scope.row)">发送提醒</el-button>
                      <el-button size="small" type="warning" @click="freezeAccount(scope.row)">冻结账户</el-button>
                      <el-button size="small" type="danger" @click="terminateService(scope.row)">终止服务</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="发票管理" name="invoiceManagement">
            <div class="invoice-management-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>发票申请列表</span>
                  </div>
                </template>
                <el-table :data="invoiceApplications" style="width: 100%">
                  <el-table-column prop="applyTime" label="申请时间" width="180" />
                  <el-table-column prop="tenantName" label="租户名称" width="200" />
                  <el-table-column prop="amount" label="金额" width="120" />
                  <el-table-column prop="invoiceType" label="发票类型" width="120" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getInvoiceStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewInvoice(scope.row)">查看</el-button>
                      <el-button size="small" type="primary" @click="approveInvoice(scope.row)">审批</el-button>
                      <el-button size="small" type="danger" @click="rejectInvoice(scope.row)">拒绝</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 响应式数据
const activeTab = ref('billingGeneration')
const chartRef = ref<HTMLElement | null>(null)

// 账单生成表单
const billingForm = reactive({
  cycle: 'monthly',
  generateTime: '',
  range: []
})

// 费用统计数据
const costStats = ref({
  totalAmount: '125,680.00',
  tenantCount: 142,
  avgAmount: '885.30',
  growthRate: '12.5'
})

// 账单生成记录
const billingRecords = ref([
  {
    period: '2023-05',
    generateTime: '2023-06-01 02:00:00',
    tenantCount: 142,
    totalAmount: '125,680.00',
    status: '已完成'
  },
  {
    period: '2023-04',
    generateTime: '2023-05-01 02:00:00',
    tenantCount: 138,
    totalAmount: '118,450.00',
    status: '已完成'
  }
])

// 欠费租户
const arrearsTenants = ref([
  {
    tenantName: 'ABC科技有限公司',
    contact: '张经理',
    phone: '13800138000',
    arrearsAmount: '2,500.00',
    arrearsDays: 15,
    lastPayment: '2023-05-20'
  },
  {
    tenantName: 'XYZ贸易公司',
    contact: '李总',
    phone: '13900139000',
    arrearsAmount: '1,200.00',
    arrearsDays: 30,
    lastPayment: '2023-05-05'
  }
])

// 发票申请
const invoiceApplications = ref([
  {
    applyTime: '2023-06-15 14:30:22',
    tenantName: 'DEF软件公司',
    amount: '5,000.00',
    invoiceType: '增值税专用发票',
    status: '待审批'
  },
  {
    applyTime: '2023-06-14 10:15:33',
    tenantName: 'GHI制造厂',
    amount: '8,500.00',
    invoiceType: '增值税普通发票',
    status: '已审批'
  }
])

// 方法
const generateBilling = () => {
  ElMessage.success('账单生成任务已启动')
}

const previewBilling = () => {
  ElMessage.info('正在预览账单')
}

const viewDetails = (row: any) => {
  ElMessage.info(`查看 ${row.period} 账单详情`)
}

const downloadBilling = (row: any) => {
  ElMessage.success(`正在下载 ${row.period} 账单`)
}

const deleteBilling = (row: any) => {
  ElMessage.warning(`已删除 ${row.period} 账单`)
}

const sendReminder = (row: any) => {
  ElMessage.success(`已向 ${row.tenantName} 发送催款提醒`)
}

const freezeAccount = (row: any) => {
  ElMessage.warning(`已冻结 ${row.tenantName} 账户`)
}

const terminateService = (row: any) => {
  ElMessage.error(`已终止 ${row.tenantName} 服务`)
}

const viewInvoice = (row: any) => {
  ElMessage.info(`查看 ${row.tenantName} 发票`)
}

const approveInvoice = (row: any) => {
  ElMessage.success(`已审批 ${row.tenantName} 的发票申请`)
  row.status = '已审批'
}

const rejectInvoice = (row: any) => {
  ElMessage.warning(`已拒绝 ${row.tenantName} 的发票申请`)
  row.status = '已拒绝'
}

// 工具方法
const getBillingStatusType = (status: string) => {
  switch (status) {
    case '已完成': return 'success'
    case '处理中': return 'warning'
    case '失败': return 'danger'
    default: return 'info'
  }
}

const getInvoiceStatusType = (status: string) => {
  switch (status) {
    case '已审批': return 'success'
    case '待审批': return 'warning'
    case '已拒绝': return 'danger'
    default: return 'info'
  }
}

// 图表初始化
onMounted(() => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value)
    
    const option = {
      title: {
        text: '费用趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [100000, 105000, 110000, 115000, 118450, 125680],
        type: 'line',
        smooth: true
      }]
    }
    
    chart.setOption(option)
  }
})
</script>

<style scoped>
.tenant-billing {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>